<template>
    <div>
        <el-table :data="tableData" :key="times" style="width: 100%;" row-key="id" border stripe>
            <el-table-column type="index" label="序号" width="60" align="center"/>
            <el-table-column prop="name" align="left" label="店铺名称" />
            <el-table-column prop="printeru" align="left" label="打印机账号" />
            <el-table-column prop="printerp" align="left" label="打印机密码" />
            <el-table-column  label="状态" align="center" width="80">
                <template slot-scope="{ row }">
                    <el-tag :type="!row.printeru && !row.printerp?'info':''">{{ !row.printeru && !row.printerp?'未绑定':'已绑定' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="80">
                <template slot-scope="scope">
                    <div style="display: flex;flex-direction: row;justify-content: center">
                        <span style="color:#409eff;font-size:14px;cursor: pointer;" v-if="!scope.row.printeru && !scope.row.printerp" @click="bindingClick(scope.row,scope.$index)">绑定</span>
                        <span style="color:#f56c6c;font-size:14px;cursor: pointer;" v-else @click="unBoundClick(scope.row)">解绑</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
        <!-- 绑定打印机   -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="422px">
            <el-form label-width="82px">
                <el-form-item label="云打印账号">
                    <el-input style="width: 300px" v-model="printeru"></el-input>
                </el-form-item>
                <el-form-item label="云打印密码">
                    <el-input type="password" style="width: 300px" v-model="printerp"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveBinding">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getInfo, list, binding, unbound } from "@/api/shop";
import permission from "@/directive/permission/index.js";
import utils from "../../../utils/utils"; // 权限判断指令
import { EventBus } from "@/api/eventBus";
import Pagination from "@/components/Pagination";
import Distpicker from "@/components/Distpicker/Distpicker";
import loadMore from "@/utils/loadMore.js";
import { mapGetters } from "vuex";
export default {
    directives: { permission, loadMore },
    components: { Pagination },
    filters: {
        watchStatus(val) {
            val = val.toString();
            if (val == 0) {
                return "待审核";
            } else if (val == 1) {
                return "已审核";
            } else if (val == 2) {
                return "已关闭";
            }
        },
        watchStatusagen(val) {
            val = val.toString();
            if (val == 0) {
                return "直营店";
            } else if (val == 3) {
                return "加盟店";
            } else if (val == 4) {
                return "联盟店";
            }
        },
        watchType(val) {
            val = val.toString();
            if (val == 0) {
                return "店铺";
            } else if (val == 1) {
                return "提货点";
            } else if (val == 2) {
                return "仓库";
            }
        },
        statusTagFilter(val) {
            if (val == 1) {
                return "success";
            } else {
                return "";
            }
        },
        statusTagFiltertype(val) {
            if (val == 3) {
                return "success";
            } else {
                return "";
            }
        },
    },
    data() {
        return {
            userInfo: {},
            tableData: [],
            pageNum: 1,
            pageSize: 20,
            total: 0,
            dialogVisible: false,
            getInfoData: {},
            printeru: "",
            printerp: "",
            bindingIndex: 0,
            times: null,
        };
    },
    created() {
        this.getList();
    },
    computed: {
        ...mapGetters(["mchId"]),
    },
    methods: {
        getList() {
            const params = new URLSearchParams();
            params.append("pageNum", this.pageNum);
            params.append("pageSize", this.pageSize);
            list(params)
                .then((resolve) => {
                    this.tableData = resolve.data.data;
                    this.total = resolve.data.total;
                })
                .catch((error) => {
                });
        },
        bindingClick(data, index) {
            this.bindingIndex = index;
            this.printeru = data.printeru;
            this.printerp = data.printerp;
            this.getInfoData = data;
            this.dialogVisible = true;
        },
        saveBinding() {
            if (utils.isNull(this.printeru) || utils.isNull(this.printerp)) {
                this.$message({
                    message: "请设置账号或密码",
                    type: "warning",
                });
                return;
            }

            binding({
                id: this.getInfoData.id,
                printeru: this.printeru,
                printerp: this.printerp,
            })
                .then((res) => {
                    this.tableData[this.bindingIndex] = res.data;
                    this.times = new Date().getTime();
                    this.$message.success("绑定成功");
                    this.dialogVisible = false;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        unBoundClick(data) {
            var _this = this
            this.$confirm("此操作将解绑打印机, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    unbound({
                        id: data.id,
                    })
                        .then((res) => {
                            data.printeru = ''
                            data.printerp = ''
                            _this.$message.success("解绑成功");
                        })
                        .catch((err) => {
                        });
                })
                .catch(() => {
                    _this.$message({
                        type: "info",
                        message: "已取消解绑",
                    });
                });
        },
    },
};
</script>

<style scoped>
/deep/ .el-dialog__body {
    padding-top: 10px;
    padding-bottom: 0px;
}
/deep/.el-dialog__footer {
    padding-top: 0px;
}
</style>
